var $j = jQuery.noConflict(); 
(function($j) {

	/**
	 * =============================================================================================================================================
	 * Reset Form
	 * =============================================================================================================================================
	 */
	
	var cTPReset = function(f) {
		var sel = 0; // which select in a form if there are more set select to original value we saved
		$j('select', f).each(function() {
			$j('a:eq(' + $j(this).data("index") + ')', $j(".select" + sel++ + " ul", f)).click();
		});

		// set checkbox to original value we saved
		$j(':checkbox', f).each(function() {
			// if it was checked set class of checked, else, set it unchecked
			$j(this).data('val') && $j('a', $j(this).parent()).addClass('cTPChecked') || $j('a', $j(this).parent()).removeClass('cTPChecked');

		});

		// set radio to original value we saved
		$j(':radio', f).each(function() {
			// if it was checked set class of checked, else, set it unchecked
			$j(this).data('val') && $j('a', $j(this).parent()).addClass('cTPCheckedR') || $j('a', $j(this).parent()).removeClass('cTPCheckedR');
		});

		$j(':file', f).each(function() {
			// for security reasons we can't set value for input file in many browsers so we do this...
			$j(this).val("");// if browser can set value (older browsers) set it to none
			$j(".cTPFileInput", $j(this).parent()).html("&nbsp;"); // set our element to space
		});
	}; 

	/**
	 * =============================================================================================================================================
	 * Checkbox
	 * =============================================================================================================================================
	 */
	
	$j.fn.cTPCheckBox = function() {
		return this.each(function() {
			var checkbox = $j(this); // jquery object of original element
			if (checkbox.data("val") != null) {
				return; // check if there is already something which means we processed it
			}
			checkbox.data('val', this.checked); // save original value
			var aElem = $j('<span class="cTPCheckboxElem"></span>'); // create our new element

			// hide original element and create our new element
			checkbox.wrap('<span class="cTPCheckbox"></span>').parent().prepend(aElem);

			// set the default state - if checked, set checked class or leave it
			this.checked && aElem.addClass('cTPChecked');

			// if original checkbox clicked change the class of our element, browser will change the state of real element
			checkbox.on("change", function() {
				// if checkbox isn't checked, add checked class, else remove checked class
				this.checked && aElem.addClass('cTPChecked') || aElem.removeClass('cTPChecked');
			});
		});
	};

	/**
	 * =============================================================================================================================================
	 * Radio 
	 * =============================================================================================================================================
	 */
	
	$j.fn.cTPRadio = function() {
		return this.each(function() {
			var radio = $j(this); // jquery object of original element
			if (radio.data("val") != null) {
				return; // check if there is already something which means we processed it
			}
			radio.data('val', this.checked); // save original value

			var aElem = $j('<span class="cTPRadioElem"></span>'); // create our new element

			radio.wrap('<span class="cTPRadio"></span>').parent().prepend(aElem); // hide original element and create our new element over it

			// set class 'checked' if input set as checked - <input type="radio" checked="checked" />
			this.checked && aElem.addClass('cTPCheckedR');

			// if we click on radio button set class as clicked! (browser will actually click it and 'unclick' others!)

			radio.on("change", function() {
				aElem.addClass('cTPCheckedR'); // no need to set class on every click
				// remove checked class from all others of the same name (browser won't remove OUR class obviously)
				$j('input[name="' + radio.attr('name') + '"]', this.form).not(radio).each(function() {
					$j(this).attr('type') == 'radio' && $j(this).prev().removeClass('cTPCheckedR'); // our elements is always before original element
				});
			});
		});
	};

	/**
	 * =============================================================================================================================================
	 * File
	 * =============================================================================================================================================
	 */
	
	$j.fn.cTPFile = function() {
		var i = 0;
		return this.each(function(index) {
			file = $j(this);

			if (file.hasClass('cTPHiddenFile')) {
				return;
			} // if it's already processed return

			var title = "";
			if (file.attr("title")) {
				title = 'title="' + file.attr("title") + '"'; file.removeAttr("title");
			}
			var buttonText = "Browse"; // default input file button value
			if (file.data('button')) {
				buttonText = file.data('button'); // if there is text for our button set, use that instead
			}
			
			file.addClass('cTPHiddenFile').wrap('<span ' + title + ' class="cTPFile"></span>').parent().prepend('<input readonly="readonly" type="text" class="cTPFileInput" onclick="$j(\'#button'+ i +'\').click();" /></span><input id="button'+ i +'" type="button" value="' + buttonText + '" />'); // hide original element and create our new element

			if (file.attr('disabled')) {
				file.parent().find("input").addClass("cTPDisabled");
			}

			// only click on our new button triggers click on original element - "input" field can be used for copying text from it
			$j(file.parent()).on("click", "input[type=button]", function() {
				$j("input[type=file]", $j(this).parent()).click();
			});

			// only prevent click if the original input is disabled
			file.on("click", function() {
				if ($j(this).attr('disabled')) {
					return false;
				}
			});

			// on change set filename to original element filename
			file.on("change", function() {
				$j(".cTPFileInput", $j(this).parent()).val($j(this).val().split('\\').pop());
			});
			i++;
		});// function each
	}; // file function
	
	/**
	 * =============================================================================================================================================
	 * Select
	 * =============================================================================================================================================
	 */
	
	$j.fn.cTPSelect = function() {
		// do this for every select
		return this.each(function() {
			var select = $j(this);
			if (select.data('styled')) {
				return; // if it's hidden
			}
			if (select.attr('multiple')) {
				return; // if it's a type of multiple select
			}

			//select.css("width", select.outerWidth() + 30 + "px"); // add width of our dropdown button

			select.wrap('<span class="cTPSelect"></span>').parent().prepend('<span class="cTPSelectBar">' + $j("option:selected", select).text() + '</span><span class="cTPSelectOpen">&#9660;</span>');

			if (select.attr('disabled')) {
				$jwrapper.addClass("cTPDisabled");
			}						

			select.on("change", function() {
				// update text
				$j(".cTPSelectBar", $j(this).parent()).text($j("option:selected", $j(this).parent()).text());
			});
			select.data("styled", "1");
		}); // each
	};

	/**
	 * =============================================================================================================================================
	 * Label
	 * =============================================================================================================================================
	 */
	
	$j.fn.cTPLabel = function() {
		return this.each(function() {
			label = $j(this);
			if (label.data("styled")) {
				return; // if we already processed this label return
			}
			// if element corresponding to this label is disabled..."disable" this label (browser will disabled it, we add class)
			if ($j("#" + label.attr("for")).attr("disabled") == "disabled") {
				label.addClass("cTPDisabled");
			}
			label.data("styled", "1");// finished
		});
	};
	
	/**
	 * =============================================================================================================================================
	 * Main function
	 * =============================================================================================================================================
	 */
	$j.fn.transform = function() {
		var elem = this;
		if (!$j.isArray(this)) {
			elem = $j(this).parent(); // if we got only one element call it on parent (our functions deal with arrays)
		}
		
		$j(':checkbox', elem).cTPCheckBox();
		$j(':radio', elem).cTPRadio();
		$j(':file', elem).cTPFile();
		$j('select', elem).cTPSelect();
		$j("label[for]", elem).cTPLabel(); // process only labels bound to element

		$j('form', elem).on('reset', function() {
			cTPReset(elem);
		}); // catch reset in a form (if there is one in our element) - we have to reset our elements manually		

	};/* End the Plugin */
	
})(jQuery);
